<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="./lib/vue.min.js"></script>
  <script src="./lib/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.5/lib/vant.min.js"></script>
  <title>小程序初体验</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css">
</head>

<body>
  <div id="app">
    <p>{{title}}</p>
    <div>
      <van-divider :style="{ color: '#000', borderColor: '#1989fa', padding: '0 16px' }">Location功能</van-divider>
      <van-button plain type="primary" @click="handleLocationClick">获取地理位置</van-button>
    </div>
    <div>
      <van-divider :style="{ color: '#000', borderColor: '#1989fa', padding: '0 16px' }">QR功能</van-divider>
      <van-button plain type="primary" @click="handleQRCLick">扫一扫</van-button>
    </div>
    <div>
      <van-divider :style="{ color: '#000', borderColor: '#1989fa', padding: '0 16px' }">Image功能</van-divider>
      <van-button plain type="primary" @click="handlePhotoClick">拍照</van-button>
      <van-grid :column-num="3" :key="list.length">
        <van-grid-item v-for="(item,i) in list" :key="i" @click="handleItemClick(item)">
          <van-image :src="item" fit="fill" />
        </van-grid-item>
      </van-grid>
    </div>

    <!-- <div>
      <van-divider :style="{ color: '#000', borderColor: '#1989fa', padding: '0 16px' }">Voice功能</van-divider>
      <div :style="flexObj">
        <van-button plain type="primary" @click="handleStartClick">开始录音</van-button>
        <van-button plain type="primary" @click="handleStopClick">停止录音</van-button>
        <van-button plain type="primary" @click="handleTranslateClick">识别音频</van-button>
      </div>
      <div :style="flexObj">
        <span>
          <van-icon v-if="!now" name="play-circle" size="3rem" @click="playVoi" /></span>
        <span>
          <van-icon v-if="now" name="pause-circle" size="3rem" @click="pauseVoi" /></span>
        <span>
          <van-icon name="stop-circle" size="3rem" @click="stopVoi" /></span>
      </div>
    </div> -->
  </div>
  <script type="text/javascript">
    // import { Button } from 'Vant'
    const vm = new Vue({
      data() {
        return {
          title: '小程序初体验',
          list: [],
          localId: '',
          now: false,
          flexObj: { width: '100vw', display: 'flex', flex: 1, justifyContent: 'space-around;' }
        }
      },
      mounted() {
        //向后端发起请求 ,传来url路径
        axios.get(`./api/get.php?url=${encodeURIComponent(location.href.split('#')[0])}`).then(res => {
          console.log(res.data)
          let obj = JSON.parse(res.data.split('<script')[0])
          // 签名认证
          wx.config({
            // 开启调试模式,调用的所有api的返回值会在客户端alert出来(扫码后,不管成功或失败都会alert),
            // 若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            debug: false,
            // 必填，公众号的唯一标识
            appId: obj.appId,
            // 必填，生成签名的时间戳
            timestamp: obj.timestamp,
            // 必填，生成签名的随机串
            nonceStr: obj.nonceStr,
            // 必填，签名
            signature: obj.signature,
            // 必填，需要使用的JS接口列表
            jsApiList: ["chooseImage", "previewImage", "getLocation", "openLocation", "scanQRCode", "translateVoice", "startRecord", "stopRecord", "playVoice", "pauseVoice", "stopVoice", "onVoicePlayEnd", "onVoiceRecordEnd"]
          });
        })
      },
      methods: {
        handlePhotoClick() {
          wx.chooseImage({
            // 数量默认9
            count: 9,
            // 可以指定是原图还是压缩图，默认二者都有
            sizeType: ['original', 'compressed'],
            // 可以指定来源是相册还是相机，默认二者都有
            sourceType: ['album', 'camera'],
            success: (res) => {
              // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
              var localIds = res.localIds;
              this.list = localIds
            }
          });
        },
        handleItemClick(item) {
          wx.previewImage({
            current: item, // 当前显示图片的http链接
            urls: this.list // 需要预览的图片http链接列表
          });
        },
        handleLocationClick() {
          wx.getLocation({
            // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            type: 'gcj02',
            success: function (res) {
              var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
              var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
              var speed = res.speed; // 速度，以米/每秒计
              var accuracy = res.accuracy; // 位置精度
              wx.openLocation({
                latitude, // 纬度，浮点数，范围为90 ~ -90
                longitude, // 经度，浮点数，范围为180 ~ -180。
                name: '', // 位置名
                address: '', // 地址详情说明
                scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
                infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
              })
            }
          });
        },
        handleQRCLick() {
          wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              alert(result)
            }
          });
        },
        handleStartClick() {
          wx.startRecord();
        },
        handleStopClick() {
          wx.stopRecord({
            success: function (res) {
              this.localId = res.localId;
            }
          });
        },
        handleTranslateClick() {
          wx.translateVoice({
            localId: this.localId, // 需要识别的音频的本地Id，由录音相关接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
              alert(res.translateResult); // 语音识别的结果
            }
          });
        },
        playVoi() {
          this.now = true
          wx.playVoice({
            localId: this.localId // 需要播放的音频的本地ID，由stopRecord接口获得
          });
        },
        pauseVoi() {
          this.now = false
          wx.pauseVoice({
            localId: this.localId // 需要暂停的音频的本地ID，由stopRecord接口获得
          });
        },
        stopVoi() {
          this.now = false
          wx.stopVoice({
            localId: this.localId // 需要停止的音频的本地ID，由stopRecord接口获得
          });
        }
      },
      updated() {
        wx.onVoicePlayEnd({
          success: function (res) {
            this.now = false
            // var localId = res.localId; // 返回音频的本地ID
          }
        });
        wx.onVoiceRecordEnd({
          // 录音时间超过一分钟没有停止的时候会执行 complete 回调
          complete: function (res) {
            this.localId = res.localId;
          }
        });
      },
    }).$mount("#app")
  </script>
</body>

</html>
<!-- {"appId":"wx974dd51f5b3b9754",
"nonceStr":"5cdTbewXTqcd3nGK",
"timestamp":1585823447,
"url":"http:\/\/topaz.applinzi.com\/mp\/one.html",
"signature":"5fa6e35f3cab402cbdf4e0db68dc624ea58a98aa",
"rawString":"jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VNNEFFhSbHf1LGyX3DWoEjy6pO414a6OPfoV1NbB7_y5_o390tgnq48xtOFNqtC13A&noncestr=5cdTbewXTqcd3nGK&timestamp=1585823447&url=http:\/\/topaz.applinzi.com\/mp\/one.html"}
<script type="text/javascript">!function(){var closed=false,bdiv;var charset=document.charset||document.characterSet;var utf8=['该页面的提供者尚未完成','实名认证','您的访问可能存在风险'];var gbk=['��ҳ����ṩ����δ���','ʵ����֤','���ķ��ʿ��ܴ��ڷ���'];var en=['The provider of this page is not','verified','there are risks when you visiting'];function banner(){var char=charset.toLowerCase(),lang='';switch(true){case char.indexOf('utf')==0:lang=utf8;break;case char.indexOf('gb')==0:lang=gbk;break;default:lang=en;}var _div='<div style="position:fixed;_position:absolute;top:0;left:0;right:0;padding:12px;background-color:rgba(0,0,0,0.5);filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);color:#fff;text-align:center;font-size:16px;font-family:simsun,serif;cursor:default;z-index:2147483647;"><p style="margin:0;padding:0;">'+lang[0]+' <a style="text-decoration:none;color:#37afe4;" target="_blank" href="http://sae.sina.com.cn/?m=faq&a=view&doc_id=22">'+lang[1]+'</a> '+lang[2]+'</p><a style="position:absolute;right:12px;top:50%;font-size:20px;color:#fff;border:none;margin:0;padding:0;;margin-top:-10px;line-height:20px;background:none;cursor:pointer;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;outline:none;">x</a></div>',div=document.createElement('div');div.innerHTML=_div;var close=div.getElementsByTagName('a')[1],x=0,y=0;close.onmouseover=function(event){var e=event?event:window.event;x=e.clientX;y=e.clientY;};close.onclick=function(event){if(event&&!event.initMouseEvent){return}var e=event?event:window.event;if(Math.abs(e.clientX-x)<10&&Math.abs(e.clientY-y)<10){div.style.display='none';closed=true;}};return div}function t(){if(closed){clearInterval(tt);return}if(bdiv&&bdiv.parentNode){bdiv.parentNode.removeChild(bdiv)}bdiv=banner();document.body.appendChild(bdiv);}t();var tt=setInterval(t,5000);}();</script> -->